<style>

</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <form class="layui-form layui-form-pane" action="" lay-filter="eduTeacherInfo">

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>基本信息</legend>
            </fieldset>


            <div class="layui-row layui-col-space20">
                <div class="layui-col-xs12 layui-col-md8">
                    <!--教师工号-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">教师工号：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="id" lay-verify="title" autocomplete="off" class="layui-input" disabled>
                        </div>
                    </div>
                    <!--姓名-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="刘备" class="layui-input" disabled>
                        </div>
                    </div>
                    <!--密码-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码框</label>
                        <div class="layui-input-inline">
                            <input type="password" placeholder="请输入密码" autocomplete="off" class="layui-input" value="123456" disabled>
                        </div>
                        <div class="layui-input-label">
                            <a class="layui-btn" id="changePassword">修改密码</a>
                        </div>
                    </div>
                    <!--性别-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="gender" value="0" title="男" checked="" disabled>
                            <input type="radio" name="gender" value="1" title="女" disabled>
                        </div>
                    </div>
                    <!--院系-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属学院：</label>
                        <div class="layui-input-inline">
                            <select name="academy" lay-filter="academy" disabled>
                                <option value="201">文学院</option>
                                <option value="202">金融学院</option>
                                <option value="203">信息学院</option>
                                <option value="204">外语学院</option>
                            </select>
                        </div>
                    </div>
                </div>
                <!--证件照预览-->
                <div class="layui-col-xs12 layui-col-md4" align="center">
                    <img src="https://img1.baidu.com/it/u=1082371593,514132625&fm=253&fmt=auto&app=138&f=JPEG?w=352&h=500" alt=""
                         width="130px" height="180px" class="layui-box" style="border: #9c9da0 solid 2px; padding: 5px;">
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>更多信息</legend>
            </fieldset>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">日期选择</label>
                    <div class="layui-input-block">
                        <input type="text" name="birth" id="birth" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">验证手机</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="phone" lay-verify="phone" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="email" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="eduTeacherInfo">修改信息</button>
                    <button class="layui-btn layui-btn-primary" id="default">恢复默认</button>
                </div>
            </div>

        </form>

    </div>
</div>
<script>
    layui.use(['jquery', 'form','layedit', 'laydate','layer'], function () {

        var $ = layui.jquery
            ,form = layui.form
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,layer = layui.layer;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        //日期
        laydate.render({
            elem: '#birth',
        });

        var eduTeacher = JSON.parse(sessionStorage.getItem("eduTeacher"));

        //表单信息初始化
        form.val('eduTeacherInfo',{
            "id" : eduTeacher.id,
            "name": eduTeacher.name,
            "password": eduTeacher.password,
            "gender": eduTeacher.gender,
            "academy": eduTeacher.academy,
            "birth": eduTeacher.birth,
            "email": eduTeacher.email,
            "phone": eduTeacher.phone
        });
        //表单提交
        form.on('submit(eduTeacherInfo)',function (data) {
            data.field['token'] = eduTeacher.token;
            $.ajax({
                url: "http://localhost/api/teacher/person",
                data: data.field,
                headers: {"token": eduTeacher.token},
                type:"post",
                success: function (result) {
                    if(result.code === 0){
                        // 修改成功后将信息更新到sessionStorage
                        console.log(result)
                        sessionStorage.removeItem("eduTeacher");
                        sessionStorage.setItem("eduTeacher",JSON.stringify(result.data));
                        layer.open({
                            type: 0,
                            content: '修改成功！'
                        });
                    }else{
                        layer.open({
                            type: 0,
                            content: result.msg
                        });
                    }
                },
                error: function (result) {}
            })
            return false;
        });

        //修改密码按钮
        $('#changePassword').click(function () {
            //修改密码界面
            $.post('person/password', {}, function(str){
                layer.open({
                    type: 1,
                    content: str //注意，如果str是object，那么需要字符拼接。
                });
            });
        });

        $('#default').click(function () {
            //恢复默认信息
            //表单信息初始化
            form.val('eduTeacherInfo',{
                "id" : eduTeacher.id,
                "name": eduTeacher.name,
                "password": eduTeacher.password,
                "gender": eduTeacher.gender,
                "academy": eduTeacher.academy,
                "birth": eduTeacher.birth,
                "email": eduTeacher.email,
                "phone": eduTeacher.phone
            });
            return false;
        });

    })
</script>